<template>
    <view class="mylist">
        <!-- <view class="tabBox">
            <image class="banner4" :src="bannerUrl" style="width: 100%;"></image>
            <view class="tabName">我的借款记录</view>
        </view> -->
        <view class="result_box">
            <view class="tabItem"  @click="payFunc(item)" v-for="item in tableList" :key="item.id" style="margin-bottom: 10px;"
                v-if="tableList.length != 0">
                <view class="formData">
                  <view class="formLabel">姓名：</view>
                  <view class="formValue">
                    {{ item.riderName }}
                    <u-tag v-if="item.isPay != 1"  style="margin-left: 20rpx" text="待支付" mode="dark" type="warning" size="mini"/>
                  </view>
                  <view class="formLabel">所属站点：</view>
                  <view class="formValue">{{ item.riderDeptName }}</view>
                </view>
                <view class="formData">
                    <view class="formLabel">借款金额：</view>
                    <view class="formValue">{{ item.amount }}</view>
                    <view class="formLabel">借款用途：</view>
                    <view class="formValue">{{ item.reason }}</view>
                </view>
                <view class="formData" v-if="item.reason == '生活费' && item.loanAttribute == '专送骑手'">
                  <view class="formLabel">应缴手续费（4%）</view>
                  <view class="formValue" style="color: red;">{{ item.amount * 0.04 }}</view>
                </view>
<!--                <view class="formData">-->
<!--                    <view class="formLabel">借款用途：</view>-->
<!--                    <view class="formValue">{{ item.reason }}</view>-->
<!--                </view>-->
                <view class="formData">
                    <view class="formLabel">申请日期：</view>
                    <view class="formValue">{{ item.applyTime }}</view>
                    <view class="formLabel">担保人：</view>
                    <view class="formValue">{{ item.guaName }}</view>
                </view>
                <view class="formData">
                    <view class="formLabel">进度：</view>
                    <view class="formValue">{{ item.statusname }}</view>
                </view>
                <view class="formData" v-if="item.statusname == '审核拒绝'">
                    <view class="formLabel">拒绝原因：</view>
                    <view class="formValue">{{ item.remarks }}</view>
                </view>

            </view>
            <view v-if="tableList.length == 0" style="text-align: center;color: #67c23a; font-size: 20px">暂无借款记录</view>
        </view>
        <!-- <view class="tabBox">
            <image class="successBg" :src="bannerUrl" style="width: 50%;margin-left: 25%;"></image>
            <view class="successMsg">提交成功</view>
        </view> -->
    </view>
</template>
<script>
import { getQueryString } from "@/utils/index.js";
import store from "@/store";
import {getUrlParam} from "../../utils";
export default {
    data() {
        return {
            bannerUrl: require('./success.png'),
            tableList: [],
            doubleClick:false,
            activeType:'',
            isPay:false
        }
    },
    filters: {
        fiterStatus(val) {
            if (val == 1) {
                return '已担保，未审核'
            } else if (val == 2) {
                return '拒绝担保'
            } else if (val == 3) {
                return '审核通过'
            } else if (val == 4) {
                return '审核拒绝'
            } else if (val == 5) {
                return '已还款'
            } else {
                return '未担保'
            }
        },
        fiterReason(val) {
            if (val == 1) {
                return '新骑手日维度生活费'
            } else if (val == 2) {
                return '生活费'
            } else if (val == 3) {
                return '垫付车辆租金'
            } else {
                return ''
            }
        }
    },
    mounted() {
        // this.getLoanList()
        // this.getUserinfo()
    },
    onLoad(option) {
        this.activeType = option.type
        if (option.type == 'yanzheng') {
            this.getList()
        } else {
            this.getLoanList()
        }
    },
    created() {
      const oScript = document.createElement('script');
      oScript.type = 'text/javascript';
      oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
      document.body.appendChild(oScript);
      oScript.onload = this.wxmini
    },
    methods: {
      wxmini(){
        var urlString = encodeURIComponent(location.href.split('#')[0])
        console.log(urlString)
        // 获取密钥
        this.$api.dormitory.getSdk(urlString).then(res=>{
          if (res.code == 300){
            this.wxmini()
          }
          const configData = res.data
          jWeixin.config({ // eslint-disable-line
            // debug: true,
            appId: configData.appid, // 必填，公众号的唯一标识
            timestamp: configData.timestamp, // 必填，生成签名的时间戳
            nonceStr: configData.noncestr, // 必填，生成签名的随机串
            signature: configData.signature,
            jsApiList: ["wx-open-launch-weapp","scanQRCode"], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
          });

          jWeixin.ready(function () {
            console.log('ready')
          });

          jWeixin.error(function (e) {
            console.log('error',e)
          });
        })
      },
        //支付手续费
        async payFunc(item) {
          if (item.isPay != 1) {
            if (this.doubleClick != false ) return
            this.doubleClick = true
            if (item.reason == '生活费' && item.loanAttribute == '专送骑手') {
              let res = await this.$api.jiekuan.createOrderByLivingExpenses({loanId:item.id,codeId:item.amount,openId:uni.getStorageSync("openidaa")}).catch(()=>{this.doubleClick = false});
              jWeixin.chooseWXPay({
                //下面参数要与上面对应
                appId: res.data.appId, // 必填，公众号的唯一标识
                timestamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
                package: res.data.packageValue, // 统一支付接口返回的prepay_id参数值
                signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: res.data.paySign, // 支付签名
                success: async (r) => { //支付成功回调
                  if (this.activeType  == 'yanzheng') {
                    this.getList()
                  } else {
                    this.getLoanList()
                  }
                },
                cancel: function(res) {
                  uni.showToast({
                    title: '取消支付',
                    icon: 'none',
                    duration: 2000,
                  })
                },
                fail: function(res) {
                  console.log("fail", res);
                  uni.showToast({
                    title: '支付失败',
                    icon: 'none',
                    duration: 2000,
                  })
                }
              });
              this.doubleClick = false
              return
            }
          }
        },
        fontColor(val) {
            if (val == 1 || val == 3) {
                return 'successColor'
            } else if (val == 2 || val == 4) {
                return 'errorColor'
            }
        },
        async getList() {
            let query = {
                openid: uni.getStorageSync("openidd"),
                phone: uni.getStorageSync("jiekuanMobile")
            }
            let res1 = await this.$api.jiekuan.getMyLoanList(query)
            this.tableList = res1.data.rows

          if(!this.isPay) this.queryOrderLoan()
          // let res = await this.$api.jiekuan.queryOrderLoan({id:id});
        },
      async queryOrderLoan(){
          for (let v=0;v<this.tableList.length;v++){
            if (this.tableList[v].isPay != 1) {
              await this.$api.jiekuan.queryOrderLoan({id:this.tableList[v].id});
            }
          }
          this.isPay = true
        if (this.activeType == 'yanzheng') {
          this.getList()
        } else {
          this.getLoanList()
        }
      },
      async getLoanList() {
            let code = getQueryString("code");
            let deptId = 121;
            let res = await this.$api.user.withoutLogin({
                code,
                deptId,
                inductionType: getUrlParam("type")?(getUrlParam("type") == 'operateRegister'?2:1): 1
            });
            uni.setStorageSync("token", res.data.token);
            uni.setStorageSync("openidd", res.data.openid);
            let query = {
                openid: res.data.openid
            }
            let resss = await this.$api.jiekuan.getUserinfo(query);
            if (resss.data) {
                let query = {
                    openid: res.data.openid,
                    phone: resss.data.phoneNumber
                }
                let res1 = await this.$api.jiekuan.getMyLoanList(query);
                this.tableList = res1.data.rows;
                if(!this.isPay) this.queryOrderLoan()
            } else {
                store.commit("UPDATE_ROUTEURL", "/pages/loanGuarantee/yanzheng2");
            }
        },
    }
}
</script>
<style lang="scss">
.mylist {
    .tabBox {
        position: relative;

        uni-image {
            height: 200rpx;
        }

        .tabName {
            color: #fff;
            font-size: 24px;
            margin: 0;
            padding-left: 30px;
            padding-top: 30px;
            position: absolute;
            top: 0;
            left: 80px;
        }
    }

    .result_box {
        margin: 10px;

        .tabItem {
            padding: 10px;
            background-color: #f3f4f6;
            box-shadow: 0 0 22px #333;

        }

        .formData {
            overflow: hidden;
            line-height: 40px;
            min-height: 40px;
            max-height: 80px;

            .formLabel {
                float: left;
                width: calc(30% - 2px);
                text-align: center;
                height: 100%;
                text-align-last: justify;
            }

            .formValue {
                float: left;
                width: 70%;
                height: 100%;
                text-align: left;
            }

            &:nth-of-type(5) {
                .formValue {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }
            }
        }

        uni-button {
            width: 80%;
            height: 40px;
        }

        .successColor {
            color: #67C23A;
        }

        .errorColor {
            color: #F56C6C;
        }
    }

    .successBg {
        margin-top: 26%;
    }

    .successMsg {
        color: #2D7FFC;
        font-size: 16px;
        margin-top: 2%;
        font-family: PingFangSC-Semibold;
        font-weight: bold;
        text-align: center;
    }

    .successInfo {
        width: 90%;
        margin: 0 auto;

        p {
            font-size: 14px;
            line-height: 21px;
        }
    }
}</style>
